/* 初始化 */
*{
  padding: 0px;
  margin:0px;
}
/* 居中垂直显示 */
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgb(119, 255, 164), rgb(255, 119, 221));
}
/* 实现图片水平排列 */
ul{
  width: 1000px;
  height: 300px;
  display: flex;
  flex-direction: row;
  justify-content: start;
}
li{
  width: 240px;
  height: 300px;
  list-style: none;
  overflow: hidden;
  position: relative;
}
/* 定位图片标题 */
li p{
  position: absolute;
  left: 0px;
  bottom:0px;
  height: 40px;
  line-height: 40px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.612);
  color: white;
  display: block;
  z-index: 10;
  text-align: center;
}
/* 伪类实现动画 */
ul:hover li{
  width: 200px;
  transition: all 0.3s;
}
ul li:hover{
  width: 600px;
  transition: all 0.3s;
}
